<template>
  <div class="marginLR">
    <Header/>
    <el-row class="border border-solid " style="line-height: 4rem">
      <el-col :span="12">
        <div class="text-center">商品信息</div>
      </el-col>
      <el-col :span="3">
        <div class="text-center">单价</div>
      </el-col>
      <el-col :span="3">
        <div class="text-center">数量</div>
      </el-col>
      <el-col :span="3">
        <div class="text-center">金额</div>
      </el-col>
      <el-col :span="3">
        <div class="text-center">操作</div>
      </el-col>
    </el-row>
    <div class="pl-5 text-myRed-one leading-10" style="background-color: #eeeeee;border-bottom: #CCC 1px dotted">
      已享优惠:省￥{{disCount.toFixed(2)}}
    </div>
    <el-row class="items-center mt-5 mb-5" v-for="(item,index) in allShops">
      <el-col :span="12">
        <div class="flex items-center">
          <input type="checkbox" v-model="item.check" />
          <img class="ml-2" src="../assets/shopcartImg.jpg" width="80">
          <div class="ml-2">华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</div>
          <div class="ml-10 text-gray-400 font-light" style="font-size: 13px">
            颜色：白色 包装：裸装
          </div>
        </div>
      </el-col>
      <el-col :span="3" style="font-size: 13px">
        <div class="text-center">
          <del style="font-size: 12px" class="text-gray-400">{{item.oldPrice.toFixed(2)}}</del>
          <div class="font-bold">{{item.newPrice.toFixed(2)}}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <el-input-number size="mini" :min="1" :max="10" v-model="item.count"></el-input-number>
      </el-col>
      <el-col :span="3">
        <div class="text-center">{{item.shopAllPrice.toFixed(2)}}</div>
      </el-col>
      <el-col :span="3" class="text-center">
        <el-button type="danger" @click="deleteShop(index)">删除</el-button>
      </el-col>
    </el-row>
    <el-row class="mb-10" style="background-color: #eee;line-height: 4rem">
      <el-col :span="2" :offset="1">
        <el-checkbox v-model="allCheck" >全选</el-checkbox>
      </el-col>

      <el-col :span="12" :offset="9">
        <span>已选择的商品 {{checkCount}} 件</span>
        <span class="ml-9">合计：</span>
        <span class="text-orange-500">¥{{allPrice.toFixed(2)}}</span>
        <el-button class="ml-16" type="success">结算</el-button>
      </el-col>

    </el-row>
  </div>
  <Foot> </Foot>
</template>

<script setup lang="ts">
import Header from "../views/header.vue"
import {reactive, ref, Ref, watch} from "vue";
import Foot from "../views/foot.vue"
class allShop {
  oldPrice: number;
  newPrice: number;
  count: number;
  check: boolean;
  shopAllPrice:number;

  constructor(oldPrice: number, newPrice: number, count: number, check: boolean,shopAllPrice:number) {
    this.oldPrice = oldPrice;
    this.newPrice = newPrice;
    this.count = count;
    this.check = check;
    this.shopAllPrice = shopAllPrice;
  }
}
let checkCount:Ref<number> = ref(0);
let allPrice:Ref<number> = ref(0);
let allCheck:Ref<boolean> = ref(false);
let disCount:Ref<number> = ref(400);

let allShops: Array<allShop> = reactive([new allShop(499, 399, 1, false,399),
  new allShop(499, 399, 1, false,399),
  new allShop(499, 399, 1, false,399),
  new allShop(499, 399, 1, false,399)
]);
watch( allCheck , () => {
  allShops.forEach( item => {
    item.check = allCheck.value;
  })
})
//监听所有商品内值的变化
watch( allShops , () => {
    allPrice.value = 0;
    checkCount.value = 0;
    disCount.value = 0;
    allShops.forEach( item => {
      if ( item.check === true){
          allPrice.value += item.newPrice*item.count;
          checkCount.value ++;
      }
      disCount.value+=item.oldPrice-item.newPrice;
    })
})
function deleteShop(index:number){
    allShops.splice(index,1);
}
</script>

<style scoped>

</style>